<template>
	<view class="bgf">
		<custom-nav :title="'用印管理'"></custom-nav>
		<view class="top-fixed p20">
			<view class="card-content flex-start">
				<view
					class="flex-column ac mr40"
					v-for="(item, index) in sealTypeList"
					:key="index"
					@tap="jumpPath(item)"
				>
					<view><image :src="item.img"></image></view>
					<view class="c6 f32">{{ item.text }}</view>
				</view>
			</view>
			<!-- <view class="df ac mt20">
				<button class="default-button" v-for="item in tabList" :class="item.id === activeTab ?'active-button':''" :key="item.id" @tap="changeTab(item)">{{ item.text }}</button>
			</view> -->
		</view>
		<view class="container f30">
			<view>
				<!-- 我发起的审批单数 -->
				<!-- <view class="card-content mt20 mb20 pt100"  @tap="jumpMore(0)">
					<view class="flex-between mb40">
						<view class="c10 fw600">{{ sealData.myStartStat.title }}</view>
						<view><uni-icons type="right" size="12" color="#101010"/></view>
					</view>
					<view class="flex-start mb20">
						<view class="flex-1 flex-column ac border-r mr10">
							<view class="mb20 c10">{{ sealData.myStartStat.totalNum }}</view>
							<view class="be">全部</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20">{{ sealData.myStartStat.processNum }}</view>
							<view class="be">审批中</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20">{{ sealData.myStartStat.completeNum }}</view>
							<view class="be">审批通过</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20">{{ sealData.myStartStat.refuseNum }}</view>
							<view class="be">审批拒绝</view>
						</view>
					</view>
				</view> -->

				<!-- 我审批的审批单数 -->
				<!-- <view class="card-content mt20 mb20 pt100"  @tap="jumpMore(1)">
					<view class="flex-between mb40">
						<view class="c10 fw600">{{ sealData.myAuditStat.title }}</view>
						<view><uni-icons type="right" size="12" color="#101010"/></view>
					</view>
					<view class="flex-start mb20">
						<view class="w25 flex-column ac border-r mr10">
							<view class="mb20 c10">{{ sealData.myAuditStat.totalNum }}</view>
							<view class="be">全部</view>
						</view>
						<view class="w25 flex-column ac">
							<view class="mb20">{{ sealData.myAuditStat.processNum }}</view>
							<view class="be">待处理</view>
						</view>
						<view class="w25 flex-column ac">
							<view class="mb20">{{ sealData.myAuditStat.finishNum }}</view>
							<view class="be">处理完成</view>
						</view>
					</view>
				</view> -->

				<!-- 我发起的文件数 -->
				<!-- <view class="card-content mt20 mb20 pt100"  @tap="jumpMore(2)">
					<view class="flex-between mb40">
						<view class="c10 fw600">{{ sealData.myStartFileStat.title }}</view>
						<view><uni-icons type="right" size="12" color="#101010"/></view>
					</view>
					<view class="flex-start mb20">
						<view class="flex-1 flex-column ac border-r mr10">
							<view class="mb20 c10">{{ sealData.myStartFileStat.totalNum }}</view>
							<view class="be">全部</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{ sealData.myStartFileStat.processNum }}</view>
							<view class="be">待盖章</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{ sealData.myStartFileStat.completeNum }}</view>
							<view class="be">已盖章</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{ sealData.myStartFileStat.refuseNum }}</view>
							<view class="be">拒绝盖章</view>
						</view>
					</view>
				</view> -->

				<!-- 我审批的文件数 -->
				<!-- <view class="card-content mt20 mb20 pt100"  @tap="jumpMore(3)">
					<view class="flex-between mb40">
						<view class="c10 fw600">{{ sealData.myAuditFileStat.title }}</view>
						<view><uni-icons type="right" size="12" color="#101010"/></view>
					</view>
					<view class="flex-start mb20">
						<view class="w25 flex-column ac border-r mr10">
							<view class="mb20 c10">{{ sealData.myAuditFileStat.totalNum }}</view>
							<view class="be">全部</view>
						</view>
						<view class="w25 flex-column ac">
							<view class="mb20 c10">{{ sealData.myAuditFileStat.processNum }}</view>
							<view class="be">待处理</view>
						</view>
						<view class="w25 flex-column ac">
							<view class="mb20 c10">{{ sealData.myAuditFileStat.finishNum }}</view>
							<view class="be">处理完成</view>
						</view>
					</view>
				</view> -->

				<!-- 我发起的用印数 -->
				<!-- <view class="card-content mt20 mb20 pt100"  @tap="jumpMore(4)">
					<view class="flex-between mb40">
						<view class="c10 fw600">{{ sealData.myStartSealStat.title }}</view>
						<view><uni-icons type="right" size="12" color="#101010"/></view>
					</view>
					<view class="flex-start mb20">
						<view class="flex-1 flex-column ac border-r mr10">
							<view class="mb20 c10">{{ sealData.myStartSealStat.totalNum }}</view>
							<view class="be">全部</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{ sealData.myStartSealStat.signNum }}</view>
							<view class="be">电子印章</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{ sealData.myStartSealStat.realNum }}</view>
							<view class="be">物理印章</view>
						</view>
					</view>
				</view> -->

				<!-- 我审批的用印数 -->
				<!-- <view class="card-content mt20 mb20 pt100"  @tap="jumpMore(5)">
					<view class="flex-between mb40">
						<view class="c10 fw600">{{ sealData.myAuditSealStat.title }}</view>
						<view><uni-icons type="right" size="12" color="#101010"/></view>
					</view>
					<view class="flex-start mb20">
						<view class="flex-1 flex-column ac border-r mr10">
							<view class="mb20 c10">{{ sealData.myAuditSealStat.totalNum }}</view>
							<view class="be">全部</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{ sealData.myAuditSealStat.signNum  }}</view>
							<view class="be">电子印章</view>
						</view>
						<view class="flex-1 flex-column ac">
							<view class="mb20 c10">{{ sealData.myAuditSealStat.realNum  }}</view>
							<view class="be">物理印章</view>
						</view>
					</view>
				</view> -->
			</view>
		</view>
		<!-- 筛选 -->
		<view v-if="popupShow" class="filter-popup">
			<view class="filter-bd">
				<view :style="{ paddingTop: `calc(${navHeight}px + 340rpx)` }">
					<scroll-view
						:scroll-y="true"
						style="max-height: calc(100vh - 300rpx - 260rpx)"
					>
						<view class="df ac pl10 pr10 mt20 data-picker-box">
							<image
								src="https://yilife-oss-dev-public.oss-cn-hangzhou.aliyuncs.com/34/130595/ORG/tdzbd6utigeypkj9g0hk8kzgk.png"
								style="width: 30rpx; height: 30rpx"
								class="ml20"
							></image>
							<uni-datetime-picker
								type="date"
								v-model="filterStartDate"
								@change="chooseStartDate"
							>
								<view
									:class="filterStartDate ? 'g3' : 'c1'"
									class="tc"
								>
									{{
										filterStartDate
											? filterStartDate
											: '开始日期'
									}}
								</view>
							</uni-datetime-picker>
							<view class="w10 tc lh80 c1 f32">至</view>
							<uni-datetime-picker
								type="date"
								v-model="filterEndDate"
								@change="chooseEndDate"
							>
								<view
									:class="filterEndDate ? 'g3' : 'c1'"
									class="tc"
								>
									{{
										filterEndDate
											? filterEndDate
											: '结束日期'
									}}
								</view>
							</uni-datetime-picker>
						</view>
					</scroll-view>
				</view>
				<view class="filter-bottom">
					<button class="reset-button w45" @tap="filterReset">
						重置
					</button>
					<button class="primary-button w45" @tap="filterSubmit">
						确定
					</button>
				</view>
			</view>
			<view
				class="filter-popup-mask"
				@tap="closeFilter"
				catchtouchmove="true"
			></view>
		</view>
	</view>
</template>
<script>
import getDateFn from '@/common/getDateFn.js'
import { getTargetDay } from '@/common/utils.js'
import { sealTypeList } from '@/common/commonData.js'
export default {
	data() {
		return {
			navHeight: 0,
			sealTypeList,
			sealData: {},
			tabList: [
				{ id: 'theWeek', text: '本周', value: '' },
				{ id: 'theMonth', text: '本月', value: '' },
				{ id: 'sevenDay', text: '近7日', value: -7 },
				{ id: 'thirtyDay', text: '近30日', value: -30 },
				{ id: 'custom', text: '自定义', value: '' },
			],
			activeTab: 'theMonth',
			popupShow: false,
			filterStartDate: '',
			filterEndDate: '',
		}
	},
	mounted() {
		this.navHeight = uni.getStorageSync('navHeight')
	},
	onLoad() {
		this.getMyProcessMixedStat()
	},
	methods: {
		jumpMore(index) {
			if ([4, 5].includes(index)) {
				uni.navigateTo({
					url: '/subPackagesIndex/pages/index/seal/sealData?active=3',
				})
			} else if ([2, 3].includes(index)) {
				uni.navigateTo({
					url: '/subPackagesIndex/pages/index/seal/sealData?active=2',
				})
			} else {
				uni.navigateTo({
					url: '/subPackagesIndex/pages/index/seal/sealData?active=1',
				})
			}
		},
		jumpPath(row) {
			uni.navigateTo({
				url: row.path,
			})
		},
		changeTab(row) {
			let startDay = ''
			let endDay = ''
			this.activeTab = row.id
			if (row.id === 'custom') {
				this.popupShow = true
			} else {
				this.popupShow = false
			}
		},
		getMyProcessMixedStat() {
			this.$request
				.request('wflow/wflow/seal/data/myProcessMixedStat', {
					method: 'post',
					data: {
						startDate: getTargetDay(-180),
						endDate: getDateFn.getDate(),
					},
				})
				.then((res) => {
					if (res.status === 200) {
						this.sealData = res.data
					}
				})
		},
		filterReset() {
			this.filterStartDate = ''
			this.filterEndDate = ''
		},
		filterSubmit() {
			this.getAllData(this.filterStartDate, this.filterEndDate)
			this.popupShow = false
		},
		// 选择开始时间
		chooseStartDate(event) {
			this.filterStartDate = event
		},
		//选择结束时间
		chooseEndDate(event) {
			this.filterEndDate = event
		},
		//关闭筛选框
		closeFilter() {
			this.popupShow = false
		},
	},
}
</script>
<style lang="scss" scoped>
.top-fixed {
	box-shadow: 0 0 black !important;
}
.container {
	padding: 24rpx;
	margin-top: 220rpx;
}
.card-content {
	border: 2rpx solid #efefef;
	border-radius: 10rpx;
	padding: 30rpx 20rpx;
	image {
		width: 100rpx;
		height: 100rpx;
	}
}
.border-r {
	border-right: 1rpx solid #efefef;
}
.data-picker-box {
	margin: 20rpx 30rpx 10rpx;
	border-radius: 6rpx;
	border: 2rpx solid rgba(217, 217, 217, 1);
	font-size: 32rpx;
}
.c1 {
	color: #c1c1c1;
}
.a3 {
	color: #3a9bff;
}
</style>
